<template>
  <div class="type_a">
    <div class="item" v-for="(wItem, wIndex) in weekList" :key="wIndex">
      <div>
        <el-checkbox v-model="wItem.checkOut" :label="wItem.name" size="large" border />
      </div>
      <div>
        <div class="picker-list" v-for="(pItem, pIndex) in wItem.pickerList" :key="pIndex">
          <div class="prick">
            <el-time-picker format="HH:mm" value-format="HH:mm" v-model="pItem.value" is-range :clearable="false"
              range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
          </div>
          <div class="btn">
            <el-button type="danger" v-if="wItem.pickerList.length > 1" @click="handChangePricker('Minus', wIndex, pIndex)">
              <el-icon>
                <Minus />
              </el-icon>
            </el-button>
            <el-button type="primary"  @click="handChangePricker('Plus', wIndex, pIndex+1)">
              <el-icon>
                <Plus />
              </el-icon>
            </el-button>
          </div>
          <div class="check">
            <el-checkbox v-model="pItem.isLiveClass" label="设置为直播课" size="large" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="form-item">
    <div class="small-title">不排课时间</div>
    <div class="row">
      <div>
        <el-checkbox v-model="params.skipLegalLeave" label="跳过法定节假日" size="large" />
      </div>
      <div class="no-class-date">
        <el-checkbox v-model="params.isAreaTime" label="时间区间" size="large" />
        <el-date-picker v-model="params.areaStartDate" type="date" placeholder="请选择" />
        <span>
          <el-icon>
            <Minus />
          </el-icon>
        </span>
        <el-date-picker v-model="params.areaEndDate" type="date" placeholder="请选择" />
      </div>
      <div class="heand-add-time">
        <div>
          <el-checkbox v-model="params.isHandAdd" label="手动添加" size="large" />
        </div>
        <div>
          <div class="hItem" v-for="(hItem, hIndex) in handAddnoClassDate" :key="hIndex">
            <div class="prick">
              <el-date-picker v-model="hItem.value" type="date" placeholder="请选择" />
            </div>
            <div class="btn">
              <el-button type="primary" v-if="hIndex + 1 == handAddnoClassDate.length"
                @click="handChangeNoClassDate('Plus', hIndex + 1)">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-button>
              <el-button type="danger" v-if="handAddnoClassDate.length > 1" @click="handChangeNoClassDate('Minus', hIndex)">
                <el-icon>
                  <Minus />
                </el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Plus, Minus } from '@element-plus/icons-vue'
import { ref, reactive } from "vue";
const params = reactive({
  skipLegalLeave: false,
  isAreaTime: false,
  areaStartDate: "",
  areaEndDate: "",
  isHandAdd: false
})
const weekList = ref([
  { checkOut: false, weekNum: 1, name: "星期一", pickerList: [{ value: ["09:30", "10:30"], isLiveClass: false }] },
  { checkOut: false, weekNum: 2, name: "星期二", pickerList: [{ value: ["09:30", "10:30"], isLiveClass: false }] },
  { checkOut: false, weekNum: 3, name: "星期三", pickerList: [{ value: ["09:30", "10:30"], isLiveClass: false }] },
  { checkOut: false, weekNum: 4, name: "星期四", pickerList: [{ value: ["09:30", "10:30"], isLiveClass: false }] },
  { checkOut: false, weekNum: 5, name: "星期五", pickerList: [{ value: ["09:30", "10:30"], isLiveClass: false }] },
  { checkOut: false, weekNum: 6, name: "星期六", pickerList: [{ value: ["09:30", "10:30"], isLiveClass: false }] },
  { checkOut: false, weekNum: 0, name: "星期日", pickerList: [{ value: ["09:30", "10:30"], isLiveClass: false }] }
])

const handAddnoClassDate = ref(
  [{value: ""}]
)

// 添加、移除按周上课时间
function handChangePricker(type, wIndex, pIndex) {
  if(type == 'Plus') {
    weekList.value[wIndex].pickerList.splice(pIndex, 0, { value: ["09:30", "10:30"], isLiveClass: false })
  }else{
    weekList.value[wIndex].pickerList.splice(pIndex, 1)
  }
}
// 添加、移除按周不排课时间
function handChangeNoClassDate(type, index) {
  if(type == 'Plus') {
    handAddnoClassDate.value.splice(index, 0, {value: ""})
  }else{
    handAddnoClassDate.value.splice(index, 1)
  }
}
</script>

<style lang="scss" scoped>
.form-item {
  display: flex;
  margin-bottom: 15px;
}
.small-title {
  padding-right: 15px;
  margin-top: 5px;
  height: 30px;
  line-height: 30px;
  text-align-last: justify;
  min-width: 72px;
}
.type_a {
  padding-left: 72px;
  .item {
    display: flex;
    .picker-list {
      margin-left: 15px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      &>div {
        margin-right: 15px;
      }
    }
  }
}

.no-class-date {
    display: flex;
    align-items: center;
    margin: 15px 0;
    span {
      margin: 0 10px;
    }
    .el-checkbox {
      margin-right: 15px;
    }
    ::v-deep .el-date-editor--date {
      width: 188px;
    }
  }

  .heand-add-time {
     display: flex;
     .hItem {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      &>div {
        margin-left: 15px;
      }
     }
  }
</style>